<template>
  <div class="con" v-loading="loading">
      <div class="user">
          <div class="info">
              <div class="row">
                <span>所在项目</span>
                <div class="inp">
                    <el-select v-model="project" filterable clearable placeholder="请选择项目" size="small">
                        <el-option v-for="item in projectlist" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="row">
                <span>客户</span>
                <div class="inp"  style="float:right;position: relative; margin-top: 10px;">
                    <el-input v-model="cusinfo" placeholder="请输入客户电话号码" size="small"></el-input>
                    <i class="el-icon-search" @click="getCusInfo()" style="position: absolute; width:40px;height:32px;right:0;top:0;color:#409EFF;text-align:center;line-height:32px"></i>
                </div>
            </div>
          </div>
          <div class="line">
            <el-row v-show="isCus">
                <el-col :span="6">
                    <i class="icon icon-mingpian"></i>
                    <span>{{datas.CNName}}</span>
                </el-col>
                <el-col :span="12">
                    <i class="icon icon-shouji"></i>
                    <span>{{datas.Tel}}</span>
                </el-col>
                <el-col :span="6">
                    <i class="icon icon-xingbie"></i>
                    <span v-if="datas.Gender==1">男</span>
                    <span v-else>女</span>
                </el-col>
            </el-row>
          </div>
          <div class="btn">
            <el-button type="primary" @click="addCusVis()" v-show="btnCus">到访登记</el-button>
          </div>
          <div class="btn">
            <el-button type="primary" @click="showTrade()" v-show="btnCus">交易处理</el-button>
          </div>
          <div class="btn">
              <router-link to="/addCus">
            <el-button type="primary" v-show="btnAdd">录入客户</el-button>
            </router-link>
          </div>
      </div>
      <div class="tabbar">
          <div class="pere">
              <div class="cho active">
                    <router-link to="/register">
                        <div style="width:100%;">
                            <i class="icon icon-dengji"></i>
                            <span>到访登记</span>
                        </div>
                    </router-link>
              </div>
              <div class="cho">
                  <router-link to="/Customer">
                    <div style="width:100%;">
                        <i class="icon icon-kehuguanli"></i>
                        <span>客户管理</span>
                    </div>
                  </router-link>
              </div>
              <div class="cho">
                    <router-link to="/home">
                    <div style="width:100%;">
                        <i class="icon icon-icon-test"></i>
                        <span>用户中心</span>
                    </div>
                  </router-link>
              </div>
          </div>
      </div>
      <el-dialog title="交易设置" width="80%" :visible.sync="setUpTrade">
          <div class="editu">
            <span style="text-align:left;display:block;width:100%;">时间：</span>
            <div class="inp">
                <el-date-picker v-model="trade.tdate" type="date" placeholder="选择日期" size="small" value-format="yyyy-MM-dd"></el-date-picker>
            </div>
          </div>
          <div class="editu">
            <span style="text-align:left;display:block;width:100%;">交易金额：</span>
            <div class="inp">
                <el-input v-model="trade.money" size="small"></el-input>
            </div>
          </div>
          <div class="editu">
            <span style="text-align:left;display:block;width:100%;">置业顾问：</span>
            <div class="inp">
                <el-input v-model="trade.adviser" size="small"></el-input>
            </div>
          </div>
          <div class="editu">
            <span style="text-align:left;display:block;width:100%;">交易项目：</span>
            <div class="inp">
                <el-select v-model="trade.pro" clearable placeholder="请选择" style="width: 100%;" size="small">
                  <el-option v-for="item in projectlist" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
            </div>
          </div>
          <div class="editu">
            <span style="text-align:left;display:block;width:100%;">交易房号：</span>
            <div class="inp">
                <el-input v-model="trade.roomid" size="small"></el-input>
            </div>
          </div>
          
        <span slot="footer" class="dialog-footer">
          <el-button @click="setUpTrade = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="fnTrade()" size="mini">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
import Api from "../../kites/api";
export default {
  name: "register",
  data() {
    return {
      loading: false,
      setUpTrade:false,
      isCus: false,
      btnCus: false, //到访登记按钮
      btnAdd: true, //新建客户按钮
      project: "",
      cusinfo: "", //客户信息
      projectlist: [],
      datas: {},
      trade: {
        tdate: "", //交易时间
        money: "", //交易金额
        adviser: "", //职业顾问
        pro: "", //交易项目
        roomid: "" //交易房号
      }
    };
  },
  mounted() {
    this.getProjectList();
  },
  methods: {
    //获取项目列表
    getProjectList() {
      var me = this;
      this.$axios
        .post(Api.getprojectlist, {
          Para: "",
          PageSize: 10000,
          PageIndex: 0,
          OrderbyString: ""
        })
        .then(res => {
          if (res.data.isOK) {
            for (var i = 0; i < res.data.data.Data.length; i++) {
              me.projectlist.push({
                value: res.data.data.Data[i].ID,
                label: res.data.data.Data[i].PName
              });
            }
          } else {
            if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							me.$router.push("/Login");
						} else {
							me.$message.error(res.data.msg);
						}
          }
        })
        .catch(function(error) {
          me.$message.error("数据拉去失败");
        });
    },
    //根据项目和客户电话查找客户
    getCusInfo() {
      var me = this;
      me.loading=true;
      this.$axios
        .post(Api.getcustomer, {
          ProjectID: me.project,
          Tel: me.cusinfo
        })
        .then(res => {
          if (res.data.isOK) {
            me.loading=false;
            me.datas = res.data.data;
            me.isCus = true;
            me.btnCus = true;
            me.trade={
              tdate: res.data.data.Trans_Time, //交易时间
              money: res.data.data.Trans_Money, //交易金额
              adviser: res.data.data.Trans_Counselor, //职业顾问
              pro: res.data.data.Trans_ProjectID, //交易项目
              roomid: res.data.data.Trans_HouseCode //交易房号
            }
            // me.btnAdd = false;
          } else {
            if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							me.$router.push("/Login");
						} else {
               me.loading=false;
              me.isCus = false;
              me.btnCus = false;
              // me.btnAdd = true;
							me.$message.error(res.data.msg);
						}
           
          }
        })
        
    },
    //到访登记
    addCusVis() {
      var me=this;
      me.loading=true;
      this.$axios
        .post(Api.cstvisit, {
          ID: "",
          CustomerID: me.datas.ID,
          SalerID: me.datas.SalerID,
          ProjectID: me.datas.ProjectID,
          Visit_Time: "",
          CreateMan: ""
        })
        .then(res => {
          if (res.data.isOK) {
            me.loading=false;
            this.$message({
              message: '新建到访成功',
              type: 'success'
            });
            
          } else {
            if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							me.$router.push("/Login");
						} else {
              me.loading=false;
							me.$message.error(res.data.msg);
						}
            
          }
        })
    },
    //显示交易弹窗
    showTrade(){
      this.setUpTrade=true;
    },
    //交易
    fnTrade(){
      var me = this;
      this.$axios
        .post(Api.settrans, {
          CustomerID: me.datas.ID,
          Trans_Time: me.trade.tdate,
          Trans_Money: me.trade.money,
          Trans_Counselor: me.trade.adviser,
          ProjectID: me.trade.pro,
          Trans_HouseCode: me.trade.roomid
        })
        .then(res => {
          if (res.data.isOK) {
            me.$message({
              message: '录入成功',
              type: 'success'
            });
            me.setUpTrade=false;
            me.trade= {
              tdate: "", //交易时间
              money: "", //交易金额
              adviser: "", //职业顾问
              pro: "", //交易项目
              roomid: "" //交易房号
            }
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              me.$router.push("/Login");
            } else {
              me.$message.error(res.data.msg);
            }
          }
        });
    }
  }
};
</script>
<style scoped>
.el-message{
  min-width: 300px;
}
a {
  text-decoration: none;
}
.con {
  position: relative;
  width: 100%;
  height: 100%;
}
.topnav {
  width: 100%;
  height: 45px;
  background-color: #35495e;
  line-height: 45px;
  color: #ffffff;
}
.topnav i {
  font-size: 25px;
  vertical-align: middle;
}
.topnav span {
  display: inline-block;
  height: 100%;
}
.user {
  width: 100%;
  height: calc(100% - 4.2rem);
  margin-bottom: 4.2rem;
}
.user .info {
  padding: 0.5rem 0;
}

.row {
  height: 2.5rem;
  padding: 0 1rem;
  margin-bottom: 1rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
.row span {
  display: block;
  float: left;
  font-size: 1.2rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-indent: 0.5rem;
}
.row .inp {
  float: right;
  width: 73%;
  height: 100%;
  line-height: 2.5rem;
  font-size: 1.5rem;
}
.row .inp label {
  line-height: 2.5rem;
  float: left;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.line {
  border-top: 1px solid #cfdbe2;
  border-bottom: 1px solid #cfdbe2;
  padding: 1rem 0.5rem;
  font-size: 1.2rem;
}
.btn {
  margin-top: 1rem;
}

.tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 4.2rem;
  border-top: 1px solid #c0bfc4;
  background-color: #f7f7fa;
}

.pere {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
}
.pere .cho {
  list-style: none;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  font-size: 1rem;
  margin-top: 0.6rem;
}
.pere .cho.active {
  color: #409eff;
}
.pere .cho.active i {
  color: #409eff !important;
}
.pere .cho.active span {
  color: #409eff;
}
.pere .cho i {
  display: block;
  font-size: 2rem;
  color: #999;
}
.pere .cho span {
  display: block;
  font-size: 0.5rem;
  color: #999;
}

.gray {
  color: #999;
}

.clearfix:after {
  content: ".";
  width: 0;
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
  overflow: hidden;
}
.el-select {
  width: 100%;
}
.editu{
  margin-bottom:5px;
}

</style>



